<template>
   <header class="header">
      <span class="icon-all" @click="goproduct"></span>
      <div class="search">
          <input type="text" v-model="textSear" placeholder="挑你所愿" @keyup.enter="goGoodslist">
      </div>
      <div class="btn" @click="golidt">搜索</div>
   </header>
</template>
<script>
export default {
    data () {
	    return {
         textSear:""
        }
     },
   methods:{
       goproduct(){
           this.$router.push({path:'/ProductList',query:{userId: this.$route.query.userId}})
       },
       goGoodslist(){
           this.$router.push({path:'/GoodsList',query:{userId: this.$route.query.userId,name:this.textSear}})
       },
       golidt(){
           this.$router.push({path:'/GoodsList',query:{userId: this.$route.query.userId,name:this.textSear}})
       }
   }
}
</script>
<style lang="less" scoped>
  .header{
      display: flex;
      z-index:100;
      height: 104px;
      align-items: center;
      position: fixed;
      left:0;
      top:0;
      right: 0;
      background:#fff;
    .icon-all{
        width: 93px;
        height: 100%;
        background:url(../../assets/class.png) no-repeat center center;
        background-size: 53px 51px;
    }
    .btn{
        width: 100px;
        text-align: center;
        height: 100%;
        color: #333;
        font-size: 28px;
        line-height: 104px;
    }
    .search{
        display: flex;
        flex: 1;
        align-items: center;
        height: 60px;
        line-height: 60px;
        background: #F4F4F4;
        border-radius: 6px;
        padding:0 70px;
        font-size: 26px;
        position: relative;
        color: #333;
        input{
            background: #F4F4F4;
        }
    }

    .search:before{
        content:'';
        position: absolute;
        left:0;
        width:70px;
        height: 100%;
        top:0;
        background: url(../../assets/search-icon.png) no-repeat center center;
        background-size: 32px 30px;
    }
  }
</style>

